<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>拖拽文件到页面中</h1>
    <div id="drop-area" style="width: 300px; height: 300px; border: 2px dashed gray;">
        将文件拖拽到此处
    </div>

    <script>
        const dropArea = document.getElementById("drop-area");
        let num = 0;
        // 注册拖拽事件监听器
        dropArea.addEventListener("dragover", handleDragOver, false);
        dropArea.addEventListener("drop", handleFileDrop, false);

        // 处理拖拽区域的"dragover"事件
        function handleDragOver(event) {
            event.preventDefault();
            event.stopPropagation();
            dropArea.classList.add("dragover");
        }

        // 处理拖拽区域的"drop"事件
        function handleFileDrop(event) {
            event.preventDefault();
            event.stopPropagation();
            dropArea.classList.remove("dragover");

            const file = event.dataTransfer.files[0];
            // 在这里进行文件处理或其他操作
            const reader = new FileReader();
            
            const arr = ['201114051王国涛.jpg', '201114052孔明洋.jpg', '201114053袁志帆.jpg', '201114054王康龙.jpg']
            reader.onload = function (event) {
                // 修改文件名
                let newFileName = arr[num];
                num =num + 1;
                console.log(num);
                // 创建新的Blob对象
                const newFile = new Blob([file], { type: file.type });

                // 生成下载链接
                const downloadUrl = URL.createObjectURL(newFile);

                // 创建<a>元素并设置下载属性和链接
                const link = document.createElement('a');
                link.href = downloadUrl;
                link.download = newFileName;

                // 触发点击事件进行下载
                link.click();

                // 清理临时下载链接
                setTimeout(function () {
                    URL.revokeObjectURL(downloadUrl);
                }, 100);
            };
            reader.readAsDataURL(file);
        }


    </script>
</body>

</html>